<template>
    <div class="page">
        <head-item :title="title"></head-item>
        <div class="top">
            <img :src="item.headImgSrc" class="topimg">
            <img class="icon"  @click="play"
            :src="isPlay?require('../../assets/images/music/music-stop.png')
            :require('../../assets/images/music/music-start.png')">
        </div>
        <div class="author">
            <img :src="item.avatar" class="a-img">
            <span class="publish">知乎 发表于 {{item.dateTime}}</span>
        </div>

        <div class="title">
           <span> {{item.title}} </span>
            <img src="../../assets/images/icon/collection.png" class="collection">
            <img src="../../assets/images/icon/share.png" class="share">
        </div>

        <div class="detail">
            {{item.detail}}
        </div>
    </div>
</template>

<script>
import data from '../../../data/local.js';
import HeadItem from '@/components/Head.vue'
    export default {
        mounted(){
            let {id} = this.$route.query;
            var {postList} = data;
            this.item = postList[id];
        },
        data(){
            return {
                title:'文章详情',
                item:'',
                isPlay:false
            }
        },
        components:{
            HeadItem
        },
        methods:{
            play(){
                this.isPlay = !this.isPlay;
            }
        }
    }
</script>

<style lang="less" scoped>
@top:46px;
@bottom:50px;
    .page{
        padding-top: @top;
    }
    .top{
        position: relative;
        .topimg{
            width: 100%;
            height: 220px;
        }
        .icon{
            position: absolute;
            width: 50px;
            height: 50px;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    }
    .author{
        padding-left: 17.5px;
        padding-top: 10px;
        overflow: hidden;
        .a-img{
            height: 30px;
            width: 30px;
            float: left;
        }
        .publish{
            float: left;
            font-size: 14px;
            padding-left: 10px;
            line-height: 40px;
        }
    }
    .title{
        padding: 20px;
        width: 100%;
        font-size: 20px;
        font-weight: bold;
        color: #405f90;
        height: 100px;
        border-bottom: 1px solid #eee;
        position: relative;
        .collection{
            position: absolute;
            bottom: -19.5px;
            right: 67.5px;
            z-index: 100;
        }
        .share{
            position: absolute;
            bottom: -19.5px;
            right: 15px;
            z-index: 100;
        }
    }
    .detail{
        padding: 20px;
        font-size: 15px;
        margin-top: 25px;
        color: rgb(153, 140, 140);
    }
</style>